<template>
  <div class="position-full meet-box">
    <div class="meet-item" v-for="(item, index) in meetList" :key="index" :style="{ ...styles.componentStyles }">
      <div class="flex-justify-start top-title">
        <p :style="{ ...styles.titleStyles }">{{item.session}}</p>
        <p v-if="item.status === 0" class="tag" :style="{ ...styles.tagColor1Styles }">{{item.tag}}</p>
        <p v-if="item.status === 1" class="tag" :style="{ ...styles.tagColor2Styles }">{{item.tag}}</p>
        <p v-if="item.status === 2" class="tag" :style="{ ...styles.tagColor3Styles }">{{item.tag}}</p>
      </div>
      <div class="flex-justify-between">
        <div v-if="item.status === 0">
          <p class="title" :style="{ ...styles.disableStyles }">{{item.title}}</p>
          <p class="small-title" :style="{ ...styles.disableStyles }"><i class="el-icon-time"></i> {{item.time}}</p>
          <p class="small-title" :style="{ ...styles.disableStyles }">
            <i class="el-icon-user-solid"></i>{{item.name}}-{{item.tel}}
          </p>
        </div>
        <div v-else>
          <p class="title" :style="{ ...styles.textStyles }">{{item.title}}</p>
          <p class="small-title" :style="{ ...styles.secondaryStyles }"><i class="el-icon-time"></i> {{item.time}}</p>
          <p class="small-title" :style="{ ...styles.secondaryStyles }">
            <i class="el-icon-user-solid"></i>{{item.name}}-{{item.tel}}
          </p>
        </div>
        <div class="btn flex-justify-around" v-if="item.tag === '进行中'"
             :style="{ backgroundColor:formatColor('brand-color', activeTheme) }">一键入会
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import {formatColor} from '@/utils';

  export default {
    name: "MeetingList",
    props: {
      widget: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    data() {
      return {
        formatColor: formatColor,
        meetList: [
          {
            status: 0,
            title: "研发周例会",
            time: '10:00-12:00',
            tel: '15019481829',
            name: '杨某某',
            session: '上一场',
            tag: '已结束'
          },
          {
            status: 1,
            title: "产品周例会",
            time: '14:00-16:00',
            tel: '15019481829',
            name: '程某某',
            session: '当前',
            tag: '进行中'
          },
          {
            status: 2,
            title: "设计周例会",
            time: '16:00-18:00',
            tel: '15019481829',
            name: '梁某某',
            session: '下一场',
            tag: '未开始'
          },
        ]
      };
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      styles() {
        const {
          componentColor = '',
          secondaryTextColor = '',
          textColor = '',
          thirdTextColor = '',
          tagColor1 = '',
          tagColor2 = '',
          tagColor3 = '',
          disableTextColor = ''

        } = this.widget.UI.data
        const tagColor1Styles = {};
        const tagColor2Styles = {};
        const tagColor3Styles = {};
        const componentStyles = {};
        const textStyles = {};
        const titleStyles = {};
        const secondaryStyles = {};
        const disableStyles = {};
        tagColor1 && (tagColor1Styles.backgroundColor = formatColor(tagColor1, this.activeTheme));
        tagColor2 && (tagColor2Styles.backgroundColor = formatColor(tagColor2, this.activeTheme));
        tagColor3 && (tagColor3Styles.backgroundColor = formatColor(tagColor3, this.activeTheme));
        componentColor && (componentStyles.backgroundColor = formatColor(componentColor, this.activeTheme));
        textColor && (textStyles.color = formatColor(textColor, this.activeTheme));
        thirdTextColor && (titleStyles.color = formatColor(thirdTextColor, this.activeTheme));
        secondaryTextColor && (secondaryStyles.color = formatColor(secondaryTextColor, this.activeTheme));
        disableTextColor && (disableStyles.color = formatColor(disableTextColor, this.activeTheme));
        return {
          tagColor1Styles: tagColor1Styles,
          tagColor2Styles: tagColor2Styles,
          tagColor3Styles: tagColor3Styles,
          componentStyles: componentStyles,
          textStyles: textStyles,
          titleStyles: titleStyles,
          secondaryStyles: secondaryStyles,
          disableStyles: disableStyles
        };
      }

    },
    methods: {},
  };
</script>

<style scoped lang="less"> .meet-box {
  width: 100%;
  height: 100%;
  //background: #212124;
  //padding: 20px;
  box-sizing: border-box;
  border-radius: 12px;
  overflow: auto;

  .meet-item:last-child {
    margin-bottom: 0;
  }

  .meet-item {
    width: 100%;
    height: 138px;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }

  .top-title {
    margin-bottom: 8px;
    color: #fff;
    gap: 10px;
  }

  .tag {
    padding: 4px 8px;
    font-size: 12px;
    color: #fff;
    border-radius: 4px;
  }

  .title {
    font-size: 20px;
    margin-bottom: 8px;
    color: #B4B8CC;
  }

  .small-title {
    font-size: 14px;
    margin-bottom: 5px;
    color: #B4B8CC;
  }

  p {
    margin: 0;
  }

  .btn {
    width: 120px;
    height: 40px;
    color: #fff;
    background: #447EF2;
    border-radius: 8px;
    font-size: 16px;
  }

}
</style>
